<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title site-demo-title">
        <li class="layui-this tab-title"></li>
    </ul>
    <div class="main-content"></div>
    <div class="layui-input-block" style="float: left; margin-left: 15px;">
        <button class="layui-btn mapping-add"></button>
    </div>
</div>
<script id="mapping-tpl" type="text/html">
    <table class="layui-table" lay-skin="line">
        <thead>
        <tr>
            <th class="i18n-lan-name"></th>
            <th class="i18n-lan-domainNameFix"></th>
            <th class="i18n-lan-ip"></th>
            <th class="i18n-lan-options"></th>
        </tr>
        </thead>
        <tbody>
        <%for(var i = 0; i < data.length; i++) {%>
        <tr>
            <td><%:=data[i].name%></td>
            <td>
                <div class="layui-form-item">
                    <%:=data[i].domainNameFix%><br>
                    <div class="layui-form-mid layui-word-aux"><%:=data[i].domainNameFinal%></div>
                </div>
            </td>
            <td><%:=data[i].lan%></td>
            <td>
                <a data-index="<%:=i%>" class="layui-btn layui-btn-mini mapping-edit"></a>
                <a data-index="<%:=i%>" class="layui-btn layui-btn-danger layui-btn-mini mapping-delete"></a>
            </td>
        </tr>
        <%}%>
        </tbody>
    </table>
</script>
<script>
  $(".tab-title").html(clientList[ clientIndex ].name + " - " + $.i18n.prop('lan.proxyconfig'));
  $(".mapping-add").html($.i18n.prop('lan.addnewconfig'));
  var html = template($("#mapping-tpl").html(), {
    data: clientList[ clientIndex ].proxyMappings
  });
  $(".main-content").html(html);
  $(".i18n-lan-name").html($.i18n.prop('lan.name'));
  $(".i18n-lan-domainNameFix").html($.i18n.prop('lan.domainNameFix'));
  $(".i18n-lan-ip").html($.i18n.prop('lan.ip'));
  $(".i18n-lan-options").html($.i18n.prop('public.options'));
  $(".mapping-edit").html($.i18n.prop('public.edit'));
  $(".mapping-delete").html($.i18n.prop('public.delete'));
  $(".mapping-config").click(function() {
    window.clientIndex = $(this).attr("data-index");
    load_page("html/lan/list.html");
  });
  $(".mapping-edit").click(function() {
    window.mappingIndex = $(this).attr("data-index");
    load_page("html/lan/edit.html");
  });
  $(".mapping-delete").click(function() {
    var mappingIndex = $(this).attr("data-index");
    layer.confirm($.i18n.prop('public.confirm.delete'), {
      title: $.i18n.prop('public.tips'),
      btn: [ $.i18n.prop('public.ok'), $.i18n.prop('public.cancel') ]
    }, function( i ) {
      layer.close(i);
      clientList[ clientIndex ].proxyMappings.splice(mappingIndex, 1);
      api_invoke("/config/update", clientList, function( data ) {
        if( data.code != 20000 ) {
          layer.alert(data.message);
        } else {
          load_page("html/lan/list.html");
        }
      });
    });
  });
  $(".back").click(function() {
    load_page("html/client/list.html");
  });

  $(".mapping-add").click(function() {
    load_page("html/lan/add.html");
  });
</script>